<template>
    <div class="paddingTop">
        <el-row>
            <el-col :span="2">
                <el-button type="primary" @click="addPowerBtn" size="medium">新增权限</el-button>
            </el-col>
            <el-col :span="22">
                <selectPermissionsBtn></selectPermissionsBtn>       <!--查询组件-->
            </el-col>
        </el-row>
        <!--新增权限弹出框-->
        <el-dialog title="新增权限" :visible.sync="dialogFormVisible" width="500px" center :close-on-click-modal = 'false'>
            <el-form :model="newPermissionsData">
                <el-form-item label="职位" :label-width="formLabelWidth">
                    <el-select v-model="newPermissionsData.jobName" placeholder="请选择职位" style="width: 100%">
                        <el-option v-for="item in jobData" :key="item.jobId" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权限" :label-width="formLabelWidth">
                    <el-select v-model="newPermissionsData.roleName" placeholder="请选择权限" style="width: 100%">
                        <el-option v-for="item in roleData" :key="item.value" :label="item.label" :value="item.label"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="toAddPermissions()">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import selectPermissionsBtn from "./selectPermissionsBtn";
    export default {
        name: "addPermissionsBtn",
        components:{
            selectPermissionsBtn,
        },
        data(){
            return{
                dialogFormVisible:false,   //新增权限弹窗的显示状态
                newPermissionsData:{jobName:'',roleName:'无',createBy:'',createTime:''},    //新增权限信息
                formLabelWidth:'80px',   //新增权限弹窗label的宽度
            }
        },
        computed:{
            //职位信息
            jobData(){
                let allJob=this.$store.state.staffInformationStore.foundAllJob;
                return allJob;
            },
            //权限
            roleData(){
                return this.$store.state.staffPermissionsStore.permissionsData;
            }
        },
        methods:{
            ...mapActions(['addNewPermission','userOperationData','selectJob','userOperation','showRolePerInfo']),

            //用户操作日志
            permissionsOperation(){
                let operation = {//用户操作
                    userName:this.$store.state.user.userName,//用户名
                    operationDate:this.$store.state.nowTime.time,//用户操作时间
                    operationMessage:`为职位（${this.newPermissionsData.jobName}）新增权限（${this.newPermissionsData.roleId}）`,//用户操作内容
                };
                this.userOperation(operation)//需要在操作完成后，调用处理用户操作的函数
            },
            //查询表格数据
            tablePermissionsInfo(){
                this.showRolePerInfo({"pageCount":parseInt(this.$store.state.staffPermissionsStore.pages.currentPage), "pageSize": parseInt(this.$store.state.staffPermissionsStore.pages.pageSize)}).then(res=>{
                    if (res.code===200){
                        // console.log(res)
                        /*this.pageData=res.staffList;   //分页内容
                        this.pageNums=res.totalPage;   //总页数*/
                    }else{
                        this.$message({
                            type: 'error',
                            message: '员工信息加载失败'
                        });
                    }
                });
            },
            //点击“新增”按钮
            addPowerBtn(){
                this.newPermissionsData={jobName:'',roleName:'无',createBy:'',createTime:''};  //点击新增，清空之前输入的
                this.dialogFormVisible=true;
            },
            //点击新增权限弹窗“提交”按钮
            toAddPermissions(){
                // console.log(this.newPermissionsData);
                this.newPermissionsData.createBy=this.$store.state.user.userName;   //创建人
                this.newPermissionsData.createTime=new Date(this.$store.state.nowTime.time);   //创建时间
                this.addNewPermission(this.newPermissionsData).then(res=>{
                    if (res.code===200){
                        this.$message({
                            type: 'success',
                            message: '新增成功！'
                        });
                        this.permissionsOperation(); //新增成功，记录操作日志
                        this.dialogFormVisible=false;  //新增权限弹窗的显示状态
                        this.tablePermissionsInfo();  //刷新列表
                    }else {
                        this.$message({
                            type: 'error',
                            message: '新增失败！'
                        });
                    }
                })
            }
        },
        created() {
            this.selectJob();   //获取所有职位
        }
    }
</script>

<style scoped>
    .paddingTop{
        padding-top: 20px;
    }
</style>